<template>
  <page-wrap
    hideTab
    :title="
      activity.activityName || (showType == 'report' ? '报告详情' : '案例详情')
    "
    back
    stayStill
    :previewId="{ activityIdCode: activity.id, sharePersonId: personId }"
  >
    <view class="detail" v-show="loaded">
      <view class="preview-box">
        <view
          class="pre-img-wrap"
          v-if="isGetCollect == '1' && (personId == '0' || !personId)"
        >
          <template>
            <image
              :src="activity.activitySubRel.previewImgList[0]"
              mode="widthFix"
              class="preview-img"
            ></image>
          </template>
          <view class="check-more-fixed">
            <button
              class="collectBtn"
              v-if="isAuthSetting"
              @click="showLoginDialog"
              type="success"
            >
              登录查看更多内容
            </button>
            <button
              class="collectBtn"
              v-else
              open-type="getUserInfo"
              @getuserinfo="getUserInfo"
              :loading="getUserInfoLoading"
              type="success"
            >
              登录查看更多内容
            </button>
          </view>
        </view>
        <view
          class="pre-img-wrap"
          v-else-if="
            isGetCollect == '1' &&
            !isCollect &&
            (activity.activitySubRel.isFree == '1' ||
              activity.activityPrice == '0') &&
            isGetCollect == '1'
          "
        >
          <template
            v-for="(
              item, index
            ) in activity.activitySubRel.previewImgList.slice(0, 1)"
          >
            <image
              :src="item"
              :key="index"
              mode="widthFix"
              class="preview-img"
            ></image>
          </template>
          <view class="check-more-fixed">
            <button class="collectBtn" @click="clickCollect">
              关注查看更多内容
            </button>
          </view>
        </view>
        <view class="pre-img-wrap" v-else>
          <template
            v-for="(item, index) in activity.activitySubRel.previewImgList"
          >
            <image
              :src="item"
              :key="index"
              mode="widthFix"
              class="preview-img"
            ></image>
          </template>
          <view
            v-if="
              !isBuy &&
              activity.activitySubRel.isFree != '1' &&
              activity.activityPrice != '0'
            "
            class="check-more"
            @click="goToDetail"
          >
            <view class="text"
              >剩余{{ activity.activitySubRel.previewPages || 0 }}页，点击查看全部
              <u-icon name="arrow-down"> </u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="recommend" v-if="recommendActivityList && !isFromZhishenji">
        <view class="recommend-title"> 猜你喜欢 </view>
        <view class="list">
          <ContentItem
            v-for="(item, index) in recommendActivityList"
            :key="index"
            type="like"
            :item="item"
            @click="handleClick(item)"
          />
        </view>
      </view>
    </view>

    <VipPopup
      :show.sync="showPopup"
      :status="status"
      :typeText="showType == 'report' ? '报告' : '案例'"
      :rightsInfo="activityRightVo"
      :activity="activity"
      @buy="handleBuy"
      @update="handleUpdate"
      @check="handleCheck"
      @free="handleFree"
    />

    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import WxLoginMixin from "@/mixins/wxLogin";
import ContentItem from "../components/ConentItem.vue";
import VipPopup from "../components/VipPopup.vue";
import ShareMixin from "@/mixins/share";
import ReportShareMixin from "@/mixins/reportShare";
import reprotAndCaseDetailMixin from "../mixins/reportAndCase"; // 报告、案例详情逻
import { appAddLinkOpenRecord, getShareUrl } from "@/api/modules/preview";
import { addToCollection, getPersonCollectStatus } from "@/api/modules/career";
import LoginDialog from "@/components/LoginDialog";
import { getPersonDetail } from "@/api/index";

export default {
  mixins: [
    WxLoginMixin,
    reprotAndCaseDetailMixin,
    ShareMixin,
    ReportShareMixin,
  ],
  components: {
    ContentItem,
    VipPopup,
    LoginDialog,
  },
  data() {
    return {
      // activityPrice:'',
      isCollect: false,
      showType: "",
      shareTitle: "案例",
      sharePath: "/pages/index/index",
      imageUrl: "",
      sharePersonId: "",
      sourceFrom: "",
      positionId: "",
      isFromZhishenji: "", //如果是从职神籍来，那就不用展示猜你喜欢
      isGetCollect: 0,
    };
  },
  onLoad(opt) {
    console.log("opt-----", opt);
    this.checkAuthSetting();
    this.sharePersonId = opt.sharePersonId;
    this.showType = opt.showType;
    if (this.showType == "report") {
      this.shareTitle = "报告";
    }
    console.log("showType--", this.showType);
    this.isFromZhishenji = opt.isFromZhishenji || 0;
    // this.activityPrice = opt.activityPrice;
    //分享出去的页面且是来源于职神籍，进行关注判断
    this.isGetCollect = opt.isGetCollect || opt.isFromZhishenji || 0;
    if (opt.isGetCollect == 1) {
      this.getCollectStatus();
    }
    console.log("isGetCollect", opt.isGetCollect);
  },
  onShareAppMessage() {
    this.shareTitle = this.activity.activityName;
    this.sharePath =
      "pagesSub/companyCenter/case/detail?id=" +
      this.activity.activityIdCode +
      "&sharePersonId=" +
      this.personId +
      "&positionId=" +
      this.positionId +
      "&fromLoginStatus=" +
      uni.getStorageSync("login-status") +
      "&&isFromZhishenji=" +
      1 +
      "&&isGetCollect=" +
      this.isGetCollect +
      "&&shareChannel=1" +
      "&&showType=" +
      this.showType +
      `&contentType=${this.shareContent.contentType}&contentTitle=${
        this.shareContent.contentTitle || ""
      }&contentId=${this.id || ""}`;
    this.imageUrl = this.activity.bannerUrl;

    let defaultObj = {
      title: this.shareTitle,
      path: this.sharePath,
      imageUrl: this.imageUrl,
    };

    return defaultObj;
  },
  onShareTimeline() {
    this.shareTitle = this.activity.activityName;
    this.sharePath =
      "pagesSub/companyCenter/case/detail?id=" +
      this.activity.activityIdCode +
      "&sharePersonId=" +
      this.personId +
      "&&isFromZhishenji=" +
      1 +
      "&&isGetCollect=" +
      this.isGetCollect +
      "&&shareChannel=2" +
      "&&showType=" +
      this.showType;
    this.imageUrl = this.activity.bannerUrl;
    return {
      title: this.shareTitle,
      path: this.sharePath,
      // imageUrl: this.imageUrl,
      query:
        "id=" +
        this.activity.activityIdCode +
        "&sharePersonId=" +
        this.personId +
        "&positionId=" +
        this.positionId +
        "&fromLoginStatus=" +
        uni.getStorageSync("login-status") +
        "&&isFromZhishenji=" +
        1 +
        "&&shareChannel=2" +
        "&&isGetCollect=" +
        this.isGetCollect +
        "&&showType=" +
        this.showType +
        `&contentType=${this.shareContent.contentType}&contentTitle=${
          this.shareContent.contentTitle || ""
        }&contentId=${this.id || ""}`,
    };
  },
  methods: {
    getCollectStatus() {
      const params = {
        positionId: this.positionId,
        personId: uni.getStorageSync("person-id").slice(2) || "",
      };
      console.log("params", params);
      getPersonCollectStatus(params).then((res) => {
        if (res.code == 200) {
          console.log("res------", res);
          this.isCollect = res.data.isCollect;
        }
      });
    },
    clickCollect() {
      const params = {
        positionId: this.positionId,
        personId: uni.getStorageSync("person-id").slice(2) || "",
        fromType: getApp().globalData.shareFrom,
      };
      addToCollection(params).then((res) => {
        if (res.code == 200) {
          this.isCollect = true;
          uni.showToast({
            title: "关注成功",
          });
          this.reportPositionCollect();
        } else {
          console.log("关注失败", res);
        }
      });
    },
    // 获取分享配置，分享埋点
    getShareUrl() {
      let params = {
        sharePersonId: this.personId,
        sharePersonName: this.userInfo.iname,
        moduleType: "OCCUPATION_MODULE_TYPE",
      };
      getShareUrl(params, this.personId)
        .then((res) => {})
        .finally(() => {});
    },
    appAddLinkOpenRecord() {
      console.log(this.sharePersonId, this.personId);

      if (this.sharePersonId && this.personId) {
        let param = {
          mpaActivityId: this.activity.activityIdCode,
          activityName: this.activity.activityName,
          activityDesc: this.activity.activityDesc,
          sharePersonId: this.sharePersonId,
          openPersonId: this.personId,
          openPersonName: this.userInfo.iname,
          moduleType: "OCCUPATION_MODULE_TYPE",
        };
        appAddLinkOpenRecord(param, this.personId)
          .then((res) => {
            // console.log(res);
          })
          .finally(() => {
            // this.loading = false;
          });
      }
    },
    goToDetail() {
      console.log("goToDetail", this.personId);
      if (this.personId) {
        this.handleDetail();
      } else {
        this.showLoginDialog();
      }
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack() {
      console.log("loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (this.isGetCollect == 1) {
        this.getCollectStatus();
      }
      this.getPersonDetail();
    },
    getPersonDetail() {
      if (!getApp().globalData.userInfo || !getApp().globalData.userInfo.id) {
        let param = {
          param: JSON.stringify({
            personId: this.personId,
          }),
          where: "",
          slaveInfo: 1,
        };
        getPersonDetail(param).then((res) => {
          this.userInfo = res.data || res;
          if (
            this.userInfo.pic &&
            this.userInfo.pic.indexOf("img.job1001.com/myUpload/pic.gif") >= 0
          ) {
            this.userInfo.pic = this.$defalutAvatar;
          }
          getApp().globalData.userInfo = this.userInfo;
        });
      } else {
        this.userInfo = getApp().globalData.userInfo;
      }
    },
  },
  watch: {
    activity(newValue, oldValue) {
      console.log("newValue", newValue);
      this.appAddLinkOpenRecord();
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  background-color: #f4f6f8;

  .preview-box {
    position: relative;

    .pre-img-wrap {
      margin: 32rpx 24rpx 0 24rpx;
      .preview-img {
        margin-bottom: 20rpx;
        border-radius: 16rpx;
      }
      .check-more {
        position: absolute;
        z-index: 2;
        bottom: 0;
        width: 100%;
        padding: 196rpx 48rpx 12rpx 0;
        font-size: 30rpx;
        text-align: center;
        color: #f75a3e;
        background-image: url($img-base + "report/mask2.png");
        background-size: 100% 100%;
        u-icon {
          margin-left: 8rpx;
        }
      }
      .check-more-fixed {
        position: fixed;
        z-index: 2;
        bottom: 0;
        width: 100%;
        padding: 900rpx 48rpx 46rpx 0;
        font-size: 30rpx;
        text-align: center;
        color: #f75a3e;
        background-image: url($img-base + "report/mask2.png");
        background-size: 100% 100%;
      }
      image {
        width: 100%;
      }
    }

    .pre-img {
      width: 702rpx;
      height: 812rpx;
      border-radius: 16rpx;
    }

    .preview-btn {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 342rpx;
      height: 160rpx;
      text-align: center;
      line-height: 140rpx;
      background-image: url($img-base + "report/react.png");
      background-size: 100% 100%;
      background-position: center 10%;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff6969;

      .icon-book {
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
        background-image: url($img-base + "report/book.png");
      }
    }
  }

  .recommend {
    &-title {
      margin-left: 32rpx;
      margin-bottom: 28rpx;
      font-size: $uni-font-size-big;
      color: #222222;
    }
  }
}
.collectBtn {
  height: 88rpx;
  background: #ff6d31;
  box-shadow: 0rpx 12rpx 20rpx 0rpx rgba(25, 13, 2, 0.15);
  border-radius: 44rpx;
  border: 2rpx solid #ffffff;
  color: #fff;
  line-height: 88rpx;
  font-weight: bold;
  font-size: 30rpx;
  letter-spacing: 2rpx;
  width: 94%;
}
</style>
